<%@page import="com.honeycomb.utils.HoneyCombColumnIndicator"%>
<%@page import="com.honeycomb.vo.UserInfoVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/index.css">
<title>HoneyComb个人首页</title>
<script type="text/javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/jquery-1.8.2.js"></script> 
<link rel="stylesheet" href="<%=request.getContextPath() %>/plugins/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/plugins/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/plugins/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/plugins/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/plugins/kindeditor/plugins/code/prettify.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/js/index.js"></script>

<style type="text/css">
	#container{width: 280px;height: 220px;}
	
		.map_tb {
			width: 60px;
			height: 67px;
			background-image: url('images/map/map_tb_middle.png');
		}
		
		.map_tb_img {
			width: 45px;
			height: 45px;
			margin: 6px 0px 0px 7px;
		}
</style>

</head>

<%
	UserInfoVO userInfoVO = (UserInfoVO)session.getAttribute(SystemConstants.HoneyComb_LoginUser_Session_Name);
%>

<script type="text/javascript">
	var mapObj;
	//显示弹出编辑器DIV
	function showInputDiv() {
		$('#inputBGDiv').css({
			'display':'block',
			'width':$(document.body).width(),
			'height':$(document.body).height(),
			'opacity':'0.5'
		});
		var divW = $('#inputDiv').width();
		var divH = $('#inputDiv').height();
		var windowW = $(window).width();
		var windowH = $(window).height();
		var scrollH = $(document).scrollTop();
		$('#inputDiv').css({
			'display':'block',
			//'top':scrollH+((windowH-divH)/2),
			'top':0,
			'left':(windowW-divW)/2
		});
		initIndexArticleHotTagList();
		selectArticle(<%=userInfoVO.getMapX() %>, <%=userInfoVO.getMapY() %>);
	}
	
	$(document).ready(function() {
		initIndexHotTagList();
		initMapContainer();
	});

	//提交添加文章（新鲜事）
	function submitArticle() {
		var articleContent = inputEditor.html();
		var articleSummary = inputEditor.text().substring(0,20);
		var articleTitle = $('#articleTitle').val();
		var tagValue = $('#tagInputValue').val();
		
		var mapX = $('#mapX').val();
		var mapY = $('#mapY').val();
		var mapAddr = $('#mapAddr').val();
		var mapDesc = $('#mapDesc').val();
		var mapProvider = $('#mapProvider').val();
		var mapType = $('#mapType').val();
		
		$('input[name="selectTags"]:checked').each(function() {
			if(tagValue != null && tagValue != "") {
				tagValue += "#";
			}
			tagValue += $(this).val();
		});
		if(tagValue == null || tagValue == "") {
			alert("请打上你的标签！^_^");
			return;
		}
		
		$.ajax({
			url: 'ajaxAddArticle.action',
			data: {
				articleTitle: articleTitle,
				articleContent: articleContent,
				articleSummary: articleSummary,
				tagValue: tagValue,
				mapX: mapX,
				mapY: mapY,
				mapAddr: mapAddr,
				mapDesc: mapDesc,
				mapProvider: mapProvider,
				mapType: mapType
			},
			type: 'post',
			async: false,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				if(rs == 0) {
					alert("新鲜事发表成功！");
					hideInputDiv();
					//刷新index文章列表
					initIndexArticleList();
				}else {
					alert("对不起发表失败！请回到主页刷新后重试.");
				}
			}
		});
		
		
	}
	
	//添加TagList修改监听
	function addListenerOfTagChange() {
		$("input[type='checkbox'][name='filterTags']").click(function() {
			initIndexArticleList();
		});
	}
	
	//根据首页tag过滤情况初始化文章列表
	function checkFilterTagList() {
		var tagArr = new Array();
		var tagArrStr = '';
		$("input[type='checkbox'][name='filterTags']:checked").each(function(){  
			tagArr.push($(this).val());
			tagArrStr += $(this).val()+"";
			tagArrStr += "-";
		});
		if(tagArr.length <= 0) {
			$('#indexArticleListDiv').html('当前过滤标签信息下，暂时没有新鲜事！');
			return null;
		}else {
			return tagArrStr;
		}
	}
	
	//初始化首页Article List
	function initIndexArticleList() {
		var tagArrStr = checkFilterTagList();
		if(tagArrStr != null) {
			$.ajax({
				url: 'ajaxQueryArticleListByTags.action',
				data: {
					tagArrStr: tagArrStr
				},
				type: 'post',
				async: true,
				dataType: 'json',
				success: function(res) {
					var rs = res.result;
					var articleSummary = '<div class="margin_5"></div>';
					if(rs == 0) {
						var data = res.data;
						for(var i=0;i<data.length;i++) {
							var item = data[i];
							articleSummary += 
								'<div class="indexArticleItemDiv">'+
									'<div style="float: left;width: 100%;height: 45px;">'+
										'<div style="float: left;width: 40px;border: 2px solid #CCCCCC;">'+
											'<img alt="" width="100%" height="100%" src="'+item.userHeadImgUrl+'">'+
										'</div>'+
										'<div style="float: left;width: 205px;height: 50px;">'+
											'<div class="indexArticleItemTitleDiv">'+
												'<a href="#" style="float: left;">'+item.articleTitle+'</a>'+
											'</div>'+
											'<div class="indexArticleItemNicknameDiv">'+
												'<span style="float: left;">'+item.userNickname+'</span>'+
												'<span style="float: right;">'+item.articleCreateDttmStr+'</span>'+					
											'</div>'+
										'</div>'+
									'</div>'+
								'</div>'+
								'<div class="margin_5"></div>';
						}
						$('#indexArticleListDiv').html(articleSummary);
					}else {
						alert("Failed");
						$('#indexArticleListDiv').html('当前过滤标签信息下，暂时没有新鲜事！');
					}
				}
			});
		}
	}
	
	//初始化首页过滤TagList
	function initIndexHotTagList() {
		$.ajax({
			url: 'ajaxQueryHotTagList.action',
			data: null,
			type: 'post',
			async: true,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				var tagListContent = '';
				if(rs == 0) {
					for(var i=0;i<res.data.length;i++) {
						var item = res.data[i];
						tagListContent += 
							'<input name="filterTags" type="checkbox" checked="checked" value="'+item.tagId+'">'+item.tagName+'<br>';
					}
					$('#indexHotTagListDiv').html(tagListContent);
				}
				//添加TagList监听
				addListenerOfTagChange();
				//初始化主页文章列表
				initIndexArticleList();
			}
		});
	}
	
	//初始化首页发表文章TagList
	function initIndexArticleHotTagList() {
		$.ajax({
			url: 'ajaxQueryHotTagList.action',
			data: null,
			type: 'post',
			async: true,
			dataType: 'json',
			success: function(res) {
				var rs = res.result;
				var tagListContent = '';
				if(rs == 0) {
					for(var i=0;i<res.data.length;i++) {
						var item = res.data[i];
						tagListContent += 
							'<div style="float: left;width: 95px;height: 30px;line-height: 30px;">'+
							'<input type="checkbox" name="selectTags" value="'+item.tagName+'">'+item.tagName+''+
							'</div>';
					}
					$('#indexArticleHotTagListDiv').html(tagListContent);
				}
			}
		});
	}
	
	//初始化地理位置选择框
	function initMapContainer() {
		// 默认用户初始位置
        var myDefPosX = 104.07125473;
        var myDefPosY = 30.65556037;
        user_position = new AMap.LngLat(myDefPosX, myDefPosY);
		
		// 创建地图实例  
        mapObj = new AMap.Map("container", {
        	level: 16, //地图初始化时的视野级别
        	center: user_position, //地图初始化时的中心点经纬度坐标
        	zooms : [3,19], //地图视野级别范围，如：[3,19]，3 为最小级别，19 为最大级别
        	dragEnable : true, //定义地图是否可以拖拽
        	zoomEnable : true, //定义地图视野级别是否可以更改
        	keyboardEnable : true, //定义地图是否可以被键盘控制
        	jogEnable: true, //定义地图拖拽时是否支持缓动效果
        	continuousZoomEnable: true, //定义地图是否有连续缩放效果
        	doubleClickZoom : true, //定义地图是否可以双击放大
        	scrollWheel: true //定义地图是否支持鼠标滚轮缩放
        });
		// 加载工具条  
        mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {  
			tool = new AMap.ToolBar({
				direction: false, // 隐藏方向导航
				ruler: false, // 隐藏视野级别控制尺
				autoPosition: false, // 禁止自动定位
				offset: {x: -10, y: 3}
			});
			mapObj.addControl(tool);
//				加载比例尺
			scale = new AMap.Scale();
			mapObj.addControl(scale); 
		});

        // 用户图标
        var userIcon = "images/default/default_head_img.gif";
        
		var me_marker = new AMap.Marker({  
			id:"myLocation",  
			position:user_position,
			draggable: true, 
			content: $("<div class='map_tb'><img src='"+ userIcon +"' class='map_tb_img'/></div>").get(0),
			offset:{x:-30,y:-65}  //偏移量需要根据marker内容大小来设置。无偏移量的情况，是从marker内容（图片）的左上角原点算起。所以一般偏移量是marker内容的-width/2和-height
		});  	
		mapObj.addOverlays(me_marker);

		// marker实现拖拽
		mapObj.bind(me_marker,"dragend",function(e){
			if(confirm("去这里逛逛？")) {
				userWalkOnMap(me_marker, e.lnglat, mapObj);
			}
			else
			{
				me_marker.setPosition(user_position);
			}
		});

		mapObj.bind(me_marker,"dragstart",function(e){
			user_position = me_marker.position;
		});
		
		// 绑定鼠标事件
		mapObj.bind(mapObj,"click",function(e){  
	        userWalkOnMap(me_marker, e.lnglat, mapObj);
		});
		
		userWalkOnMap(me_marker, user_position, mapObj);
	}

    function userWalkOnMap(me_marker, lnglatXY, mapObj) {
		getPositionInfo(lnglatXY);
    	me_marker.setPosition(lnglatXY);
		mapObj.setCenter(lnglatXY); // 设置地图中心点坐标
		selectArticle(lnglatXY.lng, lnglatXY.lat);
    }

	function getPositionInfo(lnglatXY) {
		// 查询用户位置信息
		var geo = new AMap.Geocoder({ 
			range:100,//范围 
			crossnum:1,//道路交叉口数 
			roadnum :1,//路线记录数 
			poinum:1//POI点数 
		}); 
		geo.regeocode(lnglatXY,function(data){  
	        var resultStr="";  
	        if(data.status =="E0") {  
	            for(var i=0;i<data.list.length;i++){
	                resultStr += data.list[i].province.name+data.list[i].city.name+data.list[i].district.name; 
                    for(var j=0;j<data.list[i].roadlist.length;j++){  
                        resultStr+= data.list[i].roadlist[j].name;  
                    }  
	            }  
	        } else if(data.status =="E1") {  
	             resultStr = "未查找到任何结果!";     
	        } else {  
	             resultStr= "错误信息："+data.state;  
	        }  
	        $('#mapAddr').val(resultStr);
	        $('#mapDesc').val(resultStr);
	    });         
        $('#mapX').val(lnglatXY.lng);
        $('#mapY').val(lnglatXY.lat);

	}
	
	//ajax请求文章
	function selectArticle(xx, yy) {
		$.ajax({
			type: "post",
			url: "<%=request.getContextPath() %>/ajaxMapForGetArticleRoundPoint.action",
			data: { 
			       x: xx,
			       y: yy,
			       distance: 1
			}, 
			dateType: "json",
			success: function(res) {
				if(res.result == 0) {
					var articleList = '';
					$.each(res.list, function(i, obj) {
						articleList += 
						'<div class="indexArticleForMapPointItemDiv">'+
							'<div class="indexArticleForMapPointItemHeadImgDiv">'+
								'<img alt="" width="100%" height="100%" src="<%=request.getContextPath() %>/images/default/default_head_img.gif">'+
							'</div>'+
							'<div class="indexArticleForMapPointItemEachDiv">'+
								'<div style="width: 100%;height: 25px;line-height: 25px;text-align: left;border-bottom: 1px dashed #CCCCCC;">'+
									''+obj.articleTitle+''+
								'</div>'+
								'<div style="width: 100%;height: 25px;line-height: 25px;text-align: left;">'+
									'<a href="#none">查看详情</a>'+
								'</div>'+
							'</div>'+
						'</div>';
						var marker = new AMap.Marker({  
							id:obj.articleId,  
							position: new AMap.LngLat(obj.mapX, obj.mapY),  
						    icon:"http://api.amap.com/webapi/static/Images/marker_sprite.png",
							offset:{x:-8,y:-34}  
						});  
						mapObj.addOverlays(marker);
					}); 
			        
			        $('#indexArticleListForMapPointDiv').html(articleList);
				}
			}
		});
	}
	
</script>

<body>
<%@ include file="top.jsp" %>
	<div class="margin_10"></div>
	<div class="body_div">
		<div id="indexLeftDiv" style="float: left;width: 115px;height: auto;overflow: hidden;border: 1px solid red;">
			<div id="userFaceImgUrl" style="float: left;width: 80px;height: 80px;margin: 15px;border: 5px solid white;">
				<img width="100%" height="100%" src="<%=request.getContextPath()+"/"+userInfoVO.getUserHeadImgUrl()%>">
			</div>
			<div id="userNickname" style="float: left;width: 100%;height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold;">
				<a href="<%=request.getContextPath() %>/usercenter.action"><%=userInfoVO.getUserNickname() %></a>
			</div>
			<div id="userSex" style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;font-size: 12px;">
				性别：<%=userInfoVO.getUserSex() %>
			</div>
			<div id="userBirthday" style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;font-size: 12px;">
				生日：<%=userInfoVO.getUserBirthday() %>
			</div>
			<div class="margin_10"></div>
			<div style="float: left;width: 100%;height: 150px;background-color: #EEEEEE;">
				<div style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;background-color: #CCCCCC;">
					<span style="font-weight: bold;">我的关注</span><input type="button" value="添加" style="cursor: pointer;margin-left: 10px;background-color: gray;border: none;color: white;">
				</div>
				<div id="indexHotTagListDiv" style="float: left;width: 100%;height: auto;overflow: hidden;">
					
				</div>
			</div>
			<div style="float: left;width: 100%;height: 50px;background-color: #EEEEEE;">
				<input type="button" value="只看标签" style="cursor: pointer;background-color: gray;border: none;margin-top: 5px;color: white;">
				<input type="button" value="查看全部" style="cursor: pointer;background-color: gray;border: none;margin-top: 5px;color: white;">
			</div>
			<div class="margin_10"></div>
			<div style="float: left;width: 100%;height: auto;overflow: hidden;border-bottom: 1px solid gray;background-color: #EEEEEE">
				<div style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;background-color: #CCCCCC;">
					<span style="font-weight: bold;">话题分类</span>
				</div>
				<div style="float: left;width: 100%;height: auto;overflow: hidden;">
					<span style="float: left;width: 100%;height: 30px;line-height: 30px;">+读书</span>
					<span style="float: left;width: 100%;height: 30px;line-height: 30px;">+漫画</span>
					<span style="float: left;width: 100%;height: 30px;line-height: 30px;">+电脑</span>
					<span style="float: left;width: 100%;height: 30px;line-height: 30px;">+餐饮</span>
				</div>
			</div>
		</div>
		<div id="indexRightDiv" style="float: right;width: 855px;height: auto;overflow: hidden;border: 1px solid blue;">
			<div style="float: left;width: 100%;height: 650px;border: 1px solid gray;">
				<div style="float: left;width: 585px;height: 640px;overflow: hidden;border: 1px solid red;">
					<div style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;">有什么新鲜事想告诉大家？</div>
					<div style="float: left;width: 100%;height: auto;overflow: hidden;">
						<div style="width: 100%;height: auto;overflow: hidden;border: 1px solid #DDDDDD;">
							<textarea onclick="showInputDiv()" style="width: 100%;height: 50px;border-style: none;margin: 0;padding: 0;
								border: 0 none;overflow-y: auto; overflow-x: hidden;outline: medium none;"></textarea>
						</div>
					</div>
					<div class="margin_10"></div>
					<%-- 地图区域 --%>
					<div id="map_area" style="float: left;width: 100%;height: 540px;overflow: hidden;background-color: white;">		
				       <div id="container" style="width: 100%;height: 80%;float: left;border: 1px solid #CCCCCC;">
	                   </div>
    				   <div style="width: auto;height: auto;">
    						经度：<input type="text" name="mapX" id="mapX"/> &nbsp;&nbsp; 纬度：<input type="text" name="mapY" id="mapY"/><br />
    						街道：<input type="text" name="mapAddr" id="mapAddr" size="40"/> <br/>
    						描述：<input type="text" name="mapDesc" id="mapDesc" size="40"/> <br /> 	 
    						地图提供商：<input type="text" name="mapProvider" id="mapProvider" value="amap"/> &nbsp;&nbsp; 地图类型：<input type="text" name="mapType" id="mapType" value="2"/>Type Of Article<br />
					   </div>  
					</div>
					
				</div>
				<div style="float: right;width: 260px;height: 640px;overflow: hidden;border: 1px solid red;">
					<div style="float: left;width: 100%;height: 40px;line-height: 40px;background-color: orange;">
						<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">新鲜事</div>
						<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">最热话题</div>
						<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">我的话题</div>
						<div style="float: left;width: 64px;height: 40px;line-height: 40px;text-align: center;border-right: 1px solid gray;cursor: pointer;">关注的人</div>
					</div>
					<div id="indexArticleListDiv" style="float: left;width: 100%;height: 590px;overflow: hidden;border: 1px solid blue;">
						
					</div>
				</div>
			</div>
			<div style="float: left;width: 100%;height: 300px;border: 1px solid gray;">
				<div style="float: left;width: 100%;height: 30px;line-height: 30px;text-align: left;background-color: #CCCCCC;">我的收藏</div>
			</div>
		</div>
	</div>
<%@ include file="foot.jsp" %>

<%-- 半透明背景DIV --%>
<div id="inputBGDiv" style="display: none;position: absolute;top: 0px;left: 0px;background-color: #EEEEEE;z-index: 50;"></div>
<%-- 悬浮弹出回复DIV --%>
<div id="inputDiv" style="width: 772px;height: auto;border: 1px solid #CCCCCC;display: none;position: absolute;top: 0px;left: 0px;background-color: #DEF3F8;z-index: 100;">
	<div style="float: left;width: 772px;height: 30px;line-height: 30px;text-align: center;overflow: hidden;background-color: #0080C0;">
		<div style="float: left;color: white;width: 400px;height: 30px;font-weight: bold;text-align: left;margin-left: 10px;">发表新鲜事</div>
		<div style="float: right;color: white;font-weight: bold;width: 30px;height: 30px;cursor: pointer;" onclick="hideInputDiv()">×</div>
	</div>				
	<div id="indexArticleListForMapPointDiv" class="indexArticleListForMapPointDiv">
		
	</div>

	<div class="margin_5"></div>
	<div style="float: left;width: 772px;height: 30px;line-height: 30px;text-align: left;">
		标题：<input id="articleTitle" type="text" style="width: 200px;">(15字以内)
	</div>
	<div class="margin_5"></div>			
	<div style="float: left;width: 772px;height: 220px;overflow: hidden;overflow: hidden;">
		<textarea id="inputTextArea" name="inputTextArea" cols="100" rows="8" style="width:770px;height:180px;"></textarea>
	</div>
	<div style="float: left;width: 772px;height: 25px;margin-top: 3px;">
		<input type="button" onclick="submitArticle()" value="提交新鲜事" style="float: left;height: 25px;line-height: 20px;font-weight: bold;background-color: #2B7BCC;cursor: pointer;color: white;border: 1px solid gray;">
	</div>
	<div class="margin_10"></div>
	<div style="float: left;width: 772px;height: auto;text-align: left;border-bottom: 1px dashed #CCCCCC;">
		<div style="float: left;width: 700px;height: 30px;line-height: 30px;">打上标签：</div>
		<div style="clear: both;float: left;width: 60px;height: 30px;line-height: 30px;">热门标签：</div>
		<div id="indexArticleHotTagListDiv" style="float: left;width: 600px;height: auto;line-height: 30px;border: 1px solid #DDDDDD;">
			
		</div>
		<div style="float: left;width: 60px;height: 30px;line-height: 30px;"><a href="#none">更多标签</a></div>
		<div style="float: left;width: 700px;height: auto;text-align: left;">
			创建标签：<input id="tagInputValue" type="text">(此版本在此输入标签名,多个标签请以‘#’隔开)
		</div>
	</div>
	<div class="margin_100"></div>
</div>	
</body>
</html>




